<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="ui-mode-container ui-mode-box flex-col">
        <div class="gradient pad-top-10 pad-bottom-5 mt-avatar-item flex-col align-center">
            <div class="box">
                <img class="app-image auto" @mousedown.prevent v-lazy="formatImgUrl(public_user_info.weichat_img)">
            </div>
            <p>用户ID：{{public_user_info.id_public_user_info|formatText}}</p>
            <p>注册时间：{{public_user_info.time_register?public_user_info.time_register.slice(0,10):'-'}}</p>
        </div>
        <div class="ui-mode-content flex1" ref="scroll">
            <template v-if="pageStatus">
                <div class="mt-user-info">
                    <div class="item flex-row align-center" @click="goPage({name:'修改姓名',path:'/my/username'})">
                        <div class="label flex1">用户姓名</div>
                        <span class="value">{{public_user_info.nick_name|formatText}}</span>
                        <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
                    </div>
                    <div class="item flex-row align-center" @click="goPage({name:'设置邮箱',path:'/my/email'})">
                        <div class="label flex1">用户邮箱</div>
                        <span class="value">{{public_user_info.user_email|formatText}}</span>
                        <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
                    </div>
                    <div class="item flex-row align-center">
                        <div class="label flex1">注册电话</div>
                        <span class="value">{{public_user_info.user_phone|formatText}}</span>
                    </div>
                    <!-- 在APP环境中显示此入口 -->
                    <template v-if="isAPP">
                        <div class="item flex-row align-center" @click="goAPPFunction">
                            <div class="label flex1">APP相关功能入口</div>
                            <span class="value">查看详情</span>
                            <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
                        </div>
                    </template>
                    <div class="item flex-row align-center" @click="goPage({name:'修改姓名',path:'/my/module'})">
                        <div class="label flex1">小模式列表</div>
                        <span class="value">查看详情</span>
                        <i class="icon iconfont iconjiantou-you-cuxiantiao"></i>
                    </div>
                </div>
                <div class="mt-menu-item">
                    <div class="list flex-row align-center-row" :key="i" v-for="(items,i) in getMenuList">
                        <div class="item flex-col align-center" :key="`${i}-${j}`" v-for="(item,j) in items" @click="goPage(item)"><i class="icon" :class="[`m${item.iconIndex}`]"></i>{{item.name}}</div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>
<script>
import mixinCommon from '../mixins/common';
import mixinRequest from '../mixins/request';
import mixinShare from '../mixins/share';
export default {
    name: 'my',
    data(){
        return {
            public_agent_info:{},
            public_user_info:{},
            menu:[
                {
                    name:'分享二维码',
                    path:'/my/share',
                    flag:true,
                    iconIndex:1
                },
                {
                    name:'密码设置',
                    path:'/my/password',
                    flag:true,
                    iconIndex:2
                },
                {
                    name:'地址管理',
                    path:'/my/address',
                    flag:true,
                    iconIndex:3
                },
                {
                    name:'用户充值',
                    path:'/my/recharge',
                    flag:true,
                    iconIndex:4,
                },
                {
                    name:'领券中心',
                    path:'/my/couponCenter',
                    flag:true,
                    iconIndex:6
                },
                {
                    name:'我的优惠券',
                    path:'/my/coupon',
                    flag:true,
                    iconIndex:6
                },
                {
                    name:'隐私条例',
                    path:'/my/policy',
                    flag:true,
                    iconIndex:6
                },
                {
                    name:'用户协议',
                    path:'/my/agreement',
                    flag:true,
                    iconIndex:6
                },
                {
                    name:'客服聊天',
                    path:'/my/chat',
                    flag:true,
                    iconIndex:6
                },
                {
                    name:'浏览记录',
                    path:'/my/history',
                    flag:true,
                    iconIndex:6
                }
            ]
        };
    },
    mixins:[
        mixinCommon,
        mixinRequest,
        mixinShare
    ],
    computed:{
        getMenuList(){
            let list=this.menu.filter(item=>{
                    return item.flag;
                }),
                res=[];
            if(list&&list.length){
                list.forEach((item,i)=>{
                    if(i%3==0){
                        res.push([]);
                    };
                    res[res.length-1].push(item);
                });
            };
            return res;
        }
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init);
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        /*
         * 初始化
         */
        init(){
            let public_agent_info=this.$store.state.global.public_agent_info,
                public_user_info=this.$store.state.global.public_user_info;
            if(public_agent_info&&public_user_info){
                this.public_agent_info=public_agent_info;
                this.public_user_info=public_user_info;
                document.title=this.public_agent_info.application_name;
                this.showContent();
            }else{
                this.getPageInfo({
                    name:'my',
                    param:{
                        invoke_method:'user_and_shop_info'
                    }
                }).then(({result,response})=>{ 
                    this.public_agent_info=result.public_agent_info||{};
                    this.public_user_info=result.public_user_info||{};
                    document.title=this.public_agent_info.application_name;
                    this.setState({
                        key:'public_agent_info',
                        value:this.public_agent_info
                    });
                    this.setState({
                        key:'public_user_info',
                        value:this.public_user_info
                    });
                });
            };
        },
        /*
         * 请求失败刷新
         */
        handleRefresh(){
            this.init();
        },
        /*
         * 跳转
         */
        goPage(item){
            this.$router.push({
                path:item.path,
                query:{
                }
            });
        },
        /*
         * 跳转至APP功能入口界面
         */
        goAPPFunction(){
            this.$router.push({
                path:'/my/app',
                query:{
                }
            });
        }
    },
    components:{
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.mt-avatar-item{
    position:relative;
    .box{
        width:3rem;
        height:3rem;
        border:solid 2px #fff;
        margin-bottom:0.5rem;
        box-shadow:1px 1px 3px #999;
        border-radius:50%;
        overflow:hidden;
        background:#f9f9f9;
        position:relative;
    }
    p{
        line-height:1.2rem;
        color:#fff;
        font-size:0.7rem;
    }
}
.mt-user-info{
    border-top:solid 1px #e9e9e9;
    .item{
        position:relative;
        padding:0 0.5rem;
        line-height:3rem;
        font-size:0.8rem;
        border-bottom:solid 1px #e9e9e9;
        .label{
            color:#4a4a4a;
        }
        .value{
            color:#4a4a4a;
            margin-right:0.3rem;
        }
        .icon{
            color:#888;
            font-size:0.8rem;
        }
        &:last-child{
            border-top:none;
        }
        &:active{
            background:#eee;
        }
    }
}
.mt-menu-item{
    position:relative;
    .list{
        .item{
            width:33.33%;
            color:#4a4a4a;
            position:relative;
            background:#fff;
            font-size:0.7rem;
            padding:0.5rem 0;
            cursor:pointer;
            border-bottom:solid 1px #eee;
            &:first-child,&:last-child{
                width:33%;
                border-left:solid 1px #eee;
                border-right:solid 1px #eee;
            }
            .icon{
                height:1.8rem;
                width:100%;
                line-height:1.8rem;
                font-size:1.2rem;
                text-align:center;
            	background-size:1.2rem 1.2rem;
            	background-position:center center;
            	background-repeat:no-repeat;
                &.m1{
                    background-image:url(~@/assets/images/code.png);
                }
                &.m2{
                    background-image:url(~@/assets/images/set.png);
                }
                &.m3{
                    background-image:url(~@/assets/images/manage.png);
                }
                &.m4{
                    background-image:url(~@/assets/images/user_recharge.png);
                }
                &.m5{
                    background-image:url(~@/assets/images/logout.png);
                }
                &.m6{
                    background-size:1.4rem 1.4rem;
                    background-image:url(~@/assets/images/user_coupon_icon.png);
                }
                &.m7{
                    background-size:1.4rem 1.4rem;
                    background-image:url(~@/assets/images/bank_card_icon.png);
                }
            }
            &:active{
                background:#f8f8f8;
            }
        }
    }
}
</style>
